<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .content span {
            display: inline-block;;
            width: 60px;
            font-size: 18px;
        }
        .content em {
            color: red;
        }
        .content>div {
            margin-top: 30px;
        }
        .content
        input,textarea {
            width: 600px;
            padding: 10px;
        }
        textarea {
            vertical-align: top;
            resize:none;
            height: 75px;
        }
        .submit {
            display: inline-block;
            font-size: 18px;
            padding: 6px 10px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            margin-left: 300px;
            margin-top: 40px;
            cursor: pointer;
        }
        .tips {
            font-size: 14px;
            color: #666;
            margin-left: 60px;
            margin-top: 10px;
        }
        .doctor {
            position: relative;
        }
        .doctor input {
            border: 1px solid #a5a5a5;
            width: 180px;
            background: url(../img/down.png) no-repeat right center;
            background-size: 24px;
            padding-right: 30px;
        }
        .add {
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            background-color: #68cacb;
            border-radius: 5px;
            font-size: 14px!important;
            padding: 5px;
            margin-left: 10px;
            color: #fff;
            width: 30px!important;
        }
        .add:hover {
            background-color: #3aacad;
        }
        #pic {
            width: 0;
            height: 0;
            opacity: 0;
        }
        label img {
            width: 70px;
            vertical-align: top;
            position: relative;
            left: -24px;
            cursor: pointer;
        }
        .right_cont_container {
            padding: 20px;
        }
        .ill-pull{
            width: 598px;
            border: 1px solid #c1bebe;
            margin-left: 64px;
            border-top: none;
            max-height: 160px;
            overflow-y: scroll;
            display: none;
        }
        .ill-pull div{
            line-height: 40px;
            text-indent: 20px;
            cursor: pointer;
        }
        .ill-pull div:hover{
            background-color: #efefef;
        }
        .hos-pull,
        .dept-pull,
        .doctor-pull{
            width: 178px;
            border: 1px solid #c1bebe;
            margin-left: 63px;
            border-top: none;
            max-height: 160px;
            overflow-y: scroll;
            background-color: #fff;
            z-index: 10;
            display: none;
            position: absolute;
            left: 1px;
            top: 38px;
        }
        .dept-pull {
            position: absolute;
            left: 185px;
            top: 38px;
        }
        .doctor-pull {
            position: absolute;
            left: 369px;
            top: 38px;
        }
        .hos-pull div,
        .dept-pull div,
        .doctor-pull div{
            padding: 10px 5px;
            cursor: pointer;
        }
        .hos-pull div:hover,
        .dept-pull div:hover,
        .doctor-pull div:hover{
            background-color: #efefef;
        }
        .block {
            display: block!important;
        }
        .inline-block {
            display: inline-block;
        }
        .item-box {
            display: inline-block;
        }
        .checkbox {
            width: 20px!important;
        }
        .choiced {
            margin-top: 20px;
        }
        .docd-item {
            border: 2px solid #68cacb;
            background-color: #68cacb;
            color: #fff;
            padding: 2px 6px;
            display: inline-block;
        }
        .del-doc {
            width: 10px!important;
            cursor: pointer;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>常见疾病</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>疾病列表</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>疾病修改</span>
                    </div>
                    <div class="content">
                        <div class="title">
                            <span>名称<em>*</em></span>
                            <input type="text" v-model="illName">
                        </div>
                        <div class="abstract">
                            <span>简介<em>*</em></span>
                            <textarea v-model="illIntro"></textarea>
                        </div>
                        <div class="type">
                            <span>分组<em>*</em></span>
                            <input type="text" v-model="ill" class="illtype">
                            <%--疾病分类下拉列表--%>
                            <div class="ill-pull" :class="{'block': showIllType}">
                                <div class="ill-name" v-for="ill in illList | filterBy ill" @click="choiceIll(ill.name)">{{ill.name}}</div>
                            </div>
                            <div class="tips">（可以填写和选择）</div>
                        </div>
                        <div class="doctor">
                            <span>专家<em>*</em></span>
                            <input type="text" placeholder="选择医院" v-model="hospital" class="hos-input" readonly="readonly">
                            <%--医院下拉列表--%>
                            <div class="hos-pull" :class="{'inline-block': showHos}">
                                <div class="hos-name" v-for="data in dataList" @click="choiceHos(data.hospital.name)">{{data.hospital.name}}</div>
                            </div>
                            <input type="text" placeholder="选择科室" v-model="dept" class="dept-input" readonly="readonly">
                            <%--科室下拉列表--%>
                            <div class="dept-pull" :class="{'inline-block': showDept}">
                                <div class="dept-name" v-for="dept in deptList" @click="choiceDept(dept.dept.deptName)">{{dept.dept.deptName}}</div>
                            </div>
                            <input type="text" placeholder="选择医生" :value="aaName" class="doctor-input" readonly="readonly">
                            <%--医生下拉列表--%>
                            <div class="doctor-pull" :class="{'inline-block': showDoctor}" @click="kengdieName()">
                                <div class="doctor-name" v-for="doctor in doctorList | filterBy doctor" @click="choiceDoctor(doctor.name,doctor.id)">
                                    <input type="checkbox" class="checkbox" :docname="doctor.name" :id="doctor.id">{{doctor.name}}
                                </div>
                            </div>
                            <span class="add" @click="addItem()">添加</span>
                            <div class="choiced" v-if="idList.length!=0">已选专家:
                                <div v-for="(index,name) in nameList" style="display: inline-block;margin-right: 20px;">
                                    <div class="docd-item">{{name}}</div>
                                    <span class="del-doc" @click="delDoc(index)">x</span>
                                </div>


                            </div>
                        </div>
                        <div class="logo">
                            <span>图片<em>*</em></span>
                            <label for="pic">
                                <input type="file" id="pic">
                                <%--<img src="../img/add.png" v-if="hasImg">--%>
                                <img :src="img">
                            </label>
                            <div class="tips">（图片比例为1:3，不符合规格的图片将进行压缩）</div>
                        </div>
                    </div>
                    <div class="submit" @click="submit()">
                        确认修改
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../layui/layui.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {

            illName: "",
            illIntro: "",
            showIllType: false,
            illList: [],
            ill: "",
            dataList: [],
            showHos: false,
            hospital: "",
            deptList: [],
            showDept: false,
            dept: "",
            doctorList: [],
            showDoctor: false,
            doctor: "",
            doctorId: "",
            nameList: [],
            idList: [],
            hasImg: true,
            img: "",
            aaName: ""

        },
        ready: function() {
            var _this = this;
            var id = window.location.search.substr(4);
            eeesysLoading();
            //请求疾病详情
            $.ajax({
                type: 'POST',
                url: "addIll.jsp",
                data: {
                    act: "commonDiseases",
                    hospital: "1070",
                    type: "get",
                    id: id
                },
                success: function (res) {
                    eeesysLoadingCancel();
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        //console.log(res);
                        _this.illName = res.data.common_diseases[0].name;
                        _this.illIntro = res.data.common_diseases[0].content;
                        _this.ill = res.data.common_diseases[0].tgname;
                        _this.img = res.data.common_diseases[0].img;
                        for(var i = 0; i < res.data.expert.length; i++) {
                            _this.nameList.push(res.data.expert[i].name);
                            _this.idList.push(res.data.expert[i].id+"");
                        }
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }
                }
            });

            //请求  常用疾病分组  信息
            $.ajax({
                type: 'POST',
                url: "addIll.jsp",
                data: {
                    act: "get_group_type",
                    hospital: "1070",
                    category: "1"
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.illList = res.data;
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }
                }
            });
            //监听分组input事件
            $('.illtype').on('focus',function(){
                _this.showIllType = true;
            });
            // 请求  医院  科室  医生   三级联动数据
            $.ajax({
                type: 'POST',
                url: "addIll.jsp",
                data: {
                    act: "query_expert_list",
                    hospital: "1070",
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        //res.data.pop();
                        _this.dataList = res.data;
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }

                }
            });
            $('.hos-input').on('focus',function() {
                _this.showHos = true;
                _this.showDoctor = false;

            });
            $('.dept-input').on('focus',function() {
                _this.showDept = true;
                _this.showDoctor = false;
                for(var i = 0; i < _this.dataList.length; i++) {
                    if(_this.hospital == _this.dataList[i].hospital.name) {
                        _this.deptList = _this.dataList[i].dept;
                    }
                }
            });
            $('.doctor-input').on('focus',function() {
                _this.showDoctor = true;
                for(var i = 0; i < _this.deptList.length; i++) {
                    if(_this.dept == _this.deptList[i].dept.deptName) {
                        _this.doctorList = _this.deptList[i].expert;
                    }
                };
            });
            //图片上传
            $('body').on("change","#pic",function() {
                var fileObj = document.getElementById("pic").files; // 获取文件对象
                //console.log(fileObj);
                fileUpLoadMulti(fileObj,function(res){
                    //console.log(res);
                    if(res.errcode == 0) {
                        _this.img = res.result[0];
                        _this.hasImg = false;
                    }
                });
            });
        },
        methods: {
            choiceIll: function(name) {
                this.ill = name;
                this.showIllType = false;
            },
            choiceHos: function(name) {
                this.hospital = name;
                this.showHos = false;
                this.deptList = "";
                this.dept = "";
                this.showDept = false;
                this.doctorList = "";
                this.doctor = "";
                this.showDoctor = false;
                this.aaName = "";
            },
            choiceDept: function(name) {
                this.dept = name;
                this.showDept = false;
                this.doctorList = "";
                this.doctor = "";
                this.showDoctor = false;
                this.aaName = "";
            },
            choiceDoctor: function(name,id) {
                //this.doctor = name;
                //this.doctorId = id;
                //this.showDoctor = false;
            },
            addItem: function() {
                var _this = this;
                $(":checkbox[class='checkbox']:checked").each(function(){
                    if(contains(_this.idList,$(this).attr('id'))) {
                        layer.open({
                            title: '提示',
                            content: "请不要重复选择医生！"
                        });
                        return false;
                    } else {
                        _this.nameList.push($(this).attr('docname'));
                        _this.idList.push($(this).attr('id'));
                    }
                });
                _this.showDoctor = false;
                _this.hospital = "";
                _this.dept = "";
                _this.aaName = "";
                //console.log(_this.nameList);
                //console.log(_this.idList);
            },
            delDoc: function(index) {
                var _this = this;
                console.log(index);
                _this.nameList.splice(index,1);
                _this.idList.splice(index,1);
                //console.log(_this.nameList);
                //console.log(_this.idList);
            },
            kengdieName: function() {
                var kengdieName = [];
                var showaa = "";
                $(":checkbox[class='checkbox']:checked").each(function(){
                    kengdieName.push($(this).attr('docname'));
                });
                if(kengdieName.length > 2) {
                    var length = kengdieName.length
                    showaa = kengdieName.splice(0,2).join(",") + "...等" + length + "人";
                } else {
                    showaa = kengdieName.join(",");
                }
                this.aaName = showaa;
            },
            submit: function() {
                var _this = this;
                var id = window.location.search.substr(4);
                if($.trim(_this.illName) == "") {
                    layer.open({
                        title: '提示',
                        content: "名称不能为空！"
                    });
                } else if($.trim(_this.illName).length > 50) {
                    layer.open({
                        title: '提示',
                        content: "名称长度不能超过50个字！"
                    });
                } else if($.trim(_this.illIntro) == "") {
                    layer.open({
                        title: '提示',
                        content: "简介不能为空！"
                    });
                } else if($.trim(_this.illIntro).length > 10000) {
                    layer.open({
                        title: '提示',
                        content: "简介长度不能超过10000个字！"
                    });
                } else if($.trim(_this.ill) == "") {
                    layer.open({
                        title: '提示',
                        content: "分组不能为空！"
                    });
                } else if($.trim(_this.ill).length > 20) {
                    layer.open({
                        title: '提示',
                        content: "分组名称长度不能超过20个字！"
                    });
                }
//                else if(_this.idList.length == 0) {
//                    layer.open({
//                        title: '提示',
//                        content: "请至少选择一位专家！"
//                    });
//                }
                else if(_this.img == "") {
                    layer.open({
                        title: '提示',
                        content: "请上传图片！"
                    });
                } else {
                    //console.log(_this.idList.join(","));
                    //return;
                    eeesysLoading();
                    $.ajax({
                        type: 'POST',
                        url: "addIll.jsp",
                        data: {
                            act: "common_diseases",
                            hospital: "1070",
                            id: id,
                            type: "update",
                            name: $.trim(_this.illName),
                            content: $.trim(_this.illIntro),
                            tgname: $.trim(_this.ill),
                            expertIds: _this.idList.join(","),
                            url: _this.img
                        },
                        success: function (res) {
                            eeesysLoadingCancel();
                            //console.log(res);
                            res = JSON.parse(res);
                            if(res.errcode == 0) {
                                layer.open({
                                    title: '提示',
                                    content: '修改成功!',
                                    yes: function(index, layero) {
                                        window.locationHerf('illList');
                                        layer.close(index);
                                    }
                                })
                            } else {
                                layer.open({
                                    title: '提示',
                                    content: res.errmsg
                                });
                            }
                        }
                    })
                }
            }
        }
    })
    var fileUpLoadMulti = function(files, then) {
        var form; // FormData对象
        var count = 0;
        var hasImg = false; // 判断有没有要传的图片，没有则主动调用图片
        if (files.length > 0) {
            hasImg = true;
            var xmlhttprequest;
            form = new FormData();
            form.append("act", "multi");

            var file = files[0];
            if(file.size > 10485760) {
                layer.open({
                    title: '提示',
                    content: "上传图片过大，请重新选择！"
                });
                return
            };
            //console.log(file);
            //console.log(file.type);
            if(file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png') {
                eeesysLoading();
                form.append("file[]", file);
                if (window.XMLHttpRequest) {
                    xmlhttprequest = new XMLHttpRequest();
                    if (xmlhttprequest.overrideMimeType) {
                        xmlhttprequest.overrideMimeType("text/xml");
                    }
                }
                xmlhttprequest.open("POST", "http://cloud.eeesys.com/pu/upload.php", true);
                xmlhttprequest.onreadystatechange = callback.bind(this);
                xmlhttprequest.send(form);
                function callback() {
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        var res = JSON.parse(xmlhttprequest.responseText);
                        if (res.errcode == 0) {
                            eeesysLoadingCancel();
                            then && then(res);
                        } else {
                            layer.open({
                                title: '提示',
                                content: res.errmsg
                            });
                        }
                    }
                }
            } else {
                layer.open({
                    title: '提示',
                    content: "只能上传图片!"
                });
            }
        } else {
            then();
        }
    }
    function contains(arr, obj) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === obj) {
                return true;
            }
        }
        return false;
    }
    $("body").click(function(e) {
        var target = e.target;
        var tc = target.className;
        //console.log(target);
        //console.log(tc);
        if(tc != "illtype" && tc != "hos-input" && tc != "dept-input" && tc != "doctor-input") {
            vm.showIllType = false;
            vm.showHos = false;
            vm.showDept = false;
        }
    })
    layui.use('layer', function(){
        var layer = layui.layer;
    })

</script>